// import './china.json'
$(function() {
    function getTime() {
        var date = new Date();
        return '当前时间:   ' + date.getFullYear() + ' 年 ' + 
            date.getMonth() + ' 月 ' + 
            date.getDate() + ' 日  ' +
            date.getHours() + ' : ' + 
            date.getMinutes() + " : " +
            date.getSeconds();
    }
    window.setInterval(()=> {
        $('.showTime').text(getTime());
    }, 1000);

    // bar
    (function() {
        var myChart = echarts.init(document.querySelector('.bar'));
        myChart.setOption(
            {
                color: ["#2f89cf"],
                grid:{
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel : true,
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                },
                xAxis: [{
                    position: 'bottom',
                    data:['旅游行业', '社交行业', '电商行业', '教育行业','游戏行业', '全部行业', '医疗行业'],
                    axisLabel:{
                        fontSize: 12,
                        color: "rgba(255,255,255,.6) ",
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                }],
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: 12,
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                            width: 2,
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                          }
                    }
                },
                series: [
                    {
                        name: '2019',
                        type: 'bar',
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                        itemStyle: {
                            barBorderRadius: 5,
                        },
                        barWidth: '35%',
                    },
                ]
            }
        );
        window.addEventListener('resize', () => {
            myChart.resize();
        })
    })();
    // line
    (function() {
        var myChart = echarts.init(document.querySelector('.line'));
        var data = [
            {
                name: '2021',
                data: [
                    [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                    [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
                ]
            },{
                name: '2022',
                data: [
                    [120, 110, 500, 300, 420, 500, 600, 450, 260, 550, 320, 250],
                    [120, 95, 160, 130, 105, 200, 150, 200, 100, 250, 280, 320]
                ]
            }
        ]
        var option = {
            color:['red', 'skyblue'],
            grid:{
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel:true,
                show:true,
                borderColor: "#012f4a", 
            },
            tooltip: {
                show: true,
                trigger: 'axis',
            },
            legend: {
                right: '10%',
                textStyle: {
                    color: "#4c9bfd",
                    fontSize:12,
                  },
                itemHeight: 10,
                itemWidth: 10
            },
            xAxis: {
                data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLabel:{
                    color: "rgba(255,255,255,.6) ",
                    fontSize: 12,
                    interval: 1,
                },
                axisLine: {
                    show: false // 去除轴线
                  },
                  axisTick: false,
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: 12,
                },
                axisLine: {
                    show:false,
                },
                splitLine: {
                    lineStyle: {
                      color: "#012f4a" // 分割线颜色
                    }
                },

            },
            series: [
                {
                    name: '新增粉丝',
                    type: 'line',
                    data: data[0].data[0],
                    smooth:true,
                    stack: '001',
                },
                {
                    name: '新增游客',
                    type: 'line',
                    data: data[0].data[1],
                    smooth:true,
                    stack: '001',
                },
            ]
        };
        myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
        $('.line').siblings().on('click', 'a', function() {
           option.series[0].data = data[$(this).index()].data[0];
           option.series[1].data = data[$(this).index()].data[1];
           // 重新渲染
           myChart.setOption(option);
            // console.log(option.series[0].data);
            // console.log(option.series[1].data);
        });
    })();
    // pie
    (function() {
        var myChart = echarts.init(document.querySelector('.pie'));
        myChart.setOption(
            {
                grid:{
                    top:20,
                    bottom: '20%',
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                },
                legend: {
                    show:true,
                    itemHeight: 10,
                    itemWidth: 10,
                    position: 'bottom',
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize:10,
                    },
                    bottom: 0
                },
                series: [
                    {
                        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
                        name: '年龄分布',
                        type: 'pie',
                        radius: ["40%", "60%"],
                        center: ["50%", "45%"],
                        label: {
                            show: false,
                        },
                        tooltip: {
                            trigger:'item',
                            formatter: '{a}</br>{b}:{c} ({d}%)'
                        },
                        data: [{
                            value: 89,
                            name: '0岁以下',
                        }, {
                            value: 40,
                            name: '20-29岁',
                        }, {
                            value: 80,
                            name: '30-39岁'
                        }, {
                            value: 120,
                            name: '40-49岁',
                        },{
                            value: 70,
                            name: '50岁以上',
                        }],
                    }
                ]
            }
        );
        window.addEventListener('resize', () => {
            myChart.resize();
        })
    })();
    
    //bar2
    $(function() {
        var myChart = echarts.init(document.querySelector('.bar2'));
        var colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
        myChart.setOption({
            grid: {
                top: "10%",
                left: "22%",
                bottom: "10%"
            },
            xAxis:{
                axisLabel: {
                    show: false,
                },
                axisLine: false,
                splitLine: false,
            },
            yAxis: [{
                data: ['HTML5', 'css3', 'javascript', 'VUE', 'NODE'],
                axisLabel: {
                    color: 'white',
                    fontSize: 10,
                },
                axisLine: false,
                inverse: true,
            },{
                data: [702, 350, 610, 793, 664],
                axisLabel: {
                    color: 'white',
                    fontSize: 10,
                },
                inverse: true,
                axisLine: false,
            }],
            series: [{
                name:'条',
                type:'bar',
                barWidth: '40%',
                barGap: '50',
                data: [70, 34, 60, 78, 69],
                yAxisIndex: 0,
                itemStyle: {
                    barBorderRadius: 5,
                    color: function(params) {
                        return colors[params.dataIndex % colors.length];
                    },
                    
                },
                backgroundStyle: {
                    showBackground: true,
                    borderWith: 2,
                },
                label: {
                    show: true,
                    fontSize: 10,
                    formatter: '{c}%',
                    position: 'inside',
                }
            },{
                name:'框',
                type: 'bar', 
                data: [100, 100, 100, 100, 100],
                barWidth: '40%',
                yAxisIndex: 1,
                itemStyle: {
                    color: 'none',
                    barBorderRadius: 5,
                    borderWidth: 2,
                    borderType: 'solid',
                    borderColor: 'skyblue',
                },
            }
        ]
        });
        window.addEventListener('resize', () => {
            myChart.resize();
        })
    });
    //line2
    (function() {
        var option = {
            color: ['green', 'blue'],
            grid:{
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true,
            },
            tooltip: {
                show: true,
                trigger: 'axis',
            },
            legend: {
                show:true,
                orient: 'horizontal',
                textStyle: {
                    color: '#4c9bfd',
                },
            },
            xAxis: {
                data: ['01', '02', '03','04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                axisLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.2)"
                    }
                  },
                axisLabel: {
                    interval: 2,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: true,
                }
            },
            yAxis: {
                type: 'value',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                      }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'white',
                        opacity: 0.5,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                      }
                },
                axisTick: {
                    show:false,
                }
            },
            series: [
                {
                    name: '播放量',
                    type: 'line',
                    label: {
                        show: false,
                    },
                    data: [3,2,31,34,44,14,43,13,34,31,54,67,35,2,65,76,87,88,45,4,43,14,43,23,32,5,23,12, 13, 32,43,54],
                    smooth: true,
                    symbol: 'circle',
                    symbolSIze: 8,
                    showSymbol: false,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                              {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                              },
                              {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                              }
                            ],
                            false
                          ),
                    },
                    lineStyle: {
                        normal: {
                          color: "#00d887",
                          width: 2
                        }
                      },
                    itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                    },
                    
                }, {
                    showSymbol: false,
                    data: [3,43,5,43,43,34,4,13,54,32,58,28,35,36,97,66,6,8,4,48,44,14,43,23,22,55,23,17, 63, 67,46,51],
                    name: '转发量',
                    type: 'line', 
                    smooth: true,
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                              {
                                offset: 0,
                                color: "rgba(0, 216, 135, 0.4)"
                              },
                              {
                                offset: 0.8,
                                color: "rgba(0, 216, 135, 0.1)"
                              }
                            ],
                            false
                          ),
                          shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    symbolSize: 5,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                }
            ]
        }
    echarts.init(document.querySelector('.line2')).setOption(option);
    })();
    // pie2
    (function() {
        var myChart = echarts.init(document.querySelector('.pie2'));
        myChart.setOption(
            {
                color: ["#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9","#1d9dff"],
                grid:{
                    left:'0%',
                    top:30,
                    right:'0%',
                    bottom:'10%',
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    bottom: "0%",
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                      color: "rgba(255,255,255,.5)",
                      fontSize: 10,
                    }
                  },
                series: [
                    {
                        type: 'pie',
                        radius: ["10%", "70%"],
                        center: ["50%", "50%"],
                        label: {
                            fontSize: 10
                        },
                        labelLine: {
                            // length 链接图形的线条
                            length: 6,
                            // length2 链接文字的线条
                            length2: 8
                          },
                        data: [
                            { value: 20, name: "云南" },
                            { value: 26, name: "北京" },
                            { value: 24, name: "山东" },
                            { value: 25, name: "河北" },
                            { value: 20, name: "江苏" },
                            { value: 25, name: "浙江" },
                            { value: 30, name: "四川" },
                            { value: 42, name: "湖北" }
                          ],
                        roseType: 'radius',
                    }
                ]
            }
        );
        window.addEventListener('resize', () => {
            myChart.resize();
        })
    })();

})